<!-- <template>
  <div class="find">
    <x-header :left-options="{showBack: false,  backText:''}">发现</x-header>
    <Floop></Floop>
    <tab active-color="#ff4d4d" class="tab-sticky">
      <tab-item selected @on-item-click="handlerA">新鲜的</tab-item>
      <tab-item @on-item-click="handlerB">附近的</tab-item>
    </tab>
    
    <div class="find-main" v-show="isA" v-for="item in 6">
      <div class="find-head">
        <div class="find-l"><img src="/dist/static/img/qdtb.png" alt=""></div>
        <div class="find-c">
            <p class="find-name">会飞的斑马</p>
            <small>25分钟前来过</small>
        </div>
        <div class="find-r"><span>￥</span>59</div>
      </div>

      <scroller lock-y :scrollbar-x=false>
        <div class="box1">
          <div class="box1-item" v-for="i in 7"><img src="/dist/static/img/d1.png" alt=""></div>
        </div>
      </scroller>
      <p class="find-foot">以前祖传的新华字典，现在出售，喷子勿扰</p>
      <p class="talk">评论7</p>
    </div>


    <div class="find-main" v-show="isB">
      <div class="find-head">
        <div class="find-l"><img src="/dist/static/img/qdtb.png" alt=""></div>
        <div class="find-c">
            <p class="find-name">舞动奇迹</p>
            <small>25分钟前来过</small>
        </div>
        <div class="find-r"><span>￥</span>59</div>
      </div>

      <scroller lock-y :scrollbar-x=false>
        <div class="box1">
          <div class="box1-item" v-for="i in 7"><span>{{' ' + i + ' '}}</span></div>
        </div>
      </scroller>
      <p class="find-foot">以前祖传的新华字典，现在出售，喷子勿扰</p>
      <p class="talk">评论7</p>
    </div>

    <Float></Float>
      
    <div class="no-data" v-show="true">
        <img src="/dist/static/img/f.png" alt="">
        <p>发现内容正在火速运往中<br>敬请期待</p>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { Tab, TabItem, Sticky, XHeader, Scroller} from 'vux'

import Tabbar from 'components/common/Tabbar'
import Floop from 'components/find/Floop'
import Float from 'components/find/Float'

export default {
  components: {
    Tab,
    TabItem,
    Sticky,
    XHeader,
    Floop,
    Scroller,
    Float,
    Tabbar
  },
  data () {
    return {
      isA:true,
      isB:false
    }
  },
  methods: {
    handlerA:function(){
      this.isA = true,
      this.isB = false;
    },
    handlerB:function(){
      this.isA = false,
      this.isB = true;
    }
  }
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.find{
  padding-top:46px;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.vux-header{
  background-color:#ff4d4d;
}
.vux-tab .vux-tab-item.vux-tab-selected{
  color: #ff4d4d;
  border-bottom: 3px solid #ff4d4d;
}
.vux-tab .vux-tab-ink-bar{
  background-color:#ff4d4d!important;
}

.box1 {
  height: 100px;
  position: relative;
  width: 950px;
}
.box1-item {
  width: 110px;
  height: 110px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item img{
  width:100%;
  height:100%;
  border-radius:8px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.find-main{
  margin-top:1rem;
  background-color:#fff;
  padding:1rem 2rem;
  font-size:16px;
}
.find-head{
  display: -webkit-flex; /* Safari */
  display: flex;
}
.find-l{
  flex:1;
}
.find-c{
  flex:4;
}
.find-c small{
  color:#969696!important;
}
.find-r{
  flex:1;
  color:#ff4d4d;
  font-size:3.5rem;
}
.find-r span{
  font-size:2rem;
}
.talk{
  text-align:right;
  color:#969696;
}
.find-l img{
  width:4rem;
  height:4rem;
  border-radius:50%;
}
.vux-tab .vux-tab-item{
  font-size:16px;
  color:#3f3f3f;
}

/* 数据为空 */
.no-data{
  width:50%;
  margin-left:25%;
  margin-top:6rem;
}
.no-data img{
  width:100%;
  height:100%;
}
.no-data p{
  margin-top:20px;
  text-align:center;
  font-size:16px;
  color:#969696;
}
</style> -->